<!-- 设置动态表单组件--中间表单预览 -->
<template>
  <div class="review-action">
    <a-space>
      <a-tooltip content="预览表单">
        <icon-eye :size="24" @click="review" :style="{ color: '#7a7a7a' }" />
      </a-tooltip>
      <a-tooltip content="移动端">
        <icon-mobile
          :size="24"
          @click="device = 0"
          :style="{ color: '#7a7a7a' }"
        />
      </a-tooltip>
      <a-tooltip content="PC端">
        <icon-desktop
          :size="24"
          @click="device = 1"
          :style="{ color: '#7a7a7a' }"
        />
      </a-tooltip>
    </a-space>
  </div>
  <div :class="['center', device ? 'pc' : 'phone']">
    <a-form
      class="form-draggable"
      :model="copySetUpList"
      autoLabelWidth
      :layout="(layout as Tlayout)"
    >
      <div v-show="!copySetUpList.length" class="tip">拖动至此区域</div>
      <draggable
        :list="copySetUpList"
        group="people"
        itemKey="controlName"
        class="draggable"
        @change="change"
      >
        <template #item="{ element, index }">
          <div
            :style="{
              width: element.span === 12 ? '50%' : '100%',
              margin: '5px 0px',
              boxSizing: 'border-box'
            }"
          >
            <div
              @click="formItemClick(element, index)"
              :class="
                selectItem?.uuid === element.uuid
                  ? 'center-item-choice'
                  : 'center-item'
              "
            >
              <div
                :class="['form-item', element.isDefault === 1 ? 'require' : '']"
                @click.stop="removeAt(index)"
              >
                <div
                  class="fill"
                  v-if="element.isDefault !== 1"
                  :style="{ zIndex: props.isSub ? 3999 : 999 }"
                >
                  <a-button
                    type="text"
                    shape="circle"
                    :size="'mini'"
                    style="height: 20px; width: 20px"
                  >
                    <icon-close />
                  </a-button>
                </div>
              </div>
              <FormItem
                v-bind="element"
                :values="fakeValue"
                :data="element"
                :isSub="props.isSub"
              />
              <div
                class="mask"
                :style="{
                  zIndex: props.isSub ? 2999 : 'auto',
                  border: element.validate === 1 ? '1px solid #ff000e' : ''
                }"
              />
            </div>
          </div>
        </template>
      </draggable>
    </a-form>
  </div>
  <a-modal
    v-model:visible="reviewVisible"
    :width="800"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> 预览 </template>
    <div>
      <Form
        :layout="'vertical'"
        :set-up-list="props.setUpList"
        :review="true"
      />
    </div>
  </a-modal>
</template>
<script setup lang="ts">
import draggable from 'vuedraggable';
import FormItem from '../../../RenderingForm/FormItem/index.vue';
import Form from '../../../RenderingForm/Form/index.vue';
import useForm from '@/hooks/useForm';
import { Message } from '@arco-design/web-vue';

const { selectItem, ctlSelectedIndex, remove, formItemClick, change } =
  useForm();
const props = withDefaults(
  //参数说明
  defineProps<{
    setUpList: any[]; //tab显示的tab列表
    // choiceUuid: string;
    layout: string;
    /**
     * 是否是子集渲染，主要是用于防止表格嵌套控件被拖动编辑
     */
    isSub?: boolean;
  }>(),
  {
    isSub: false
  }
);
const device = ref(1); //0移动端，1PC端
const fakeValue = ref(['']);
// 控件列表数据新增和移动事件，移除不会触发此函数

const copySetUpList = computed(() => {
  return props.setUpList;
});
// eslint-disable-next-line @typescript-eslint/no-unused-vars
type Tlayout = 'inline' | 'horizontal' | 'vertical' | undefined;
//根据下标移除控件
const removeAt = (index: any) => {
  if (!copySetUpList.value) return;
  remove(copySetUpList.value, index);
};
const reviewVisible = ref(false);
const review = () => {
  if (!copySetUpList.value.length) {
    Message.info('请先添加控件');
    return;
  }

  reviewVisible.value = true;
};
const handleCancel = () => {
  reviewVisible.value = false;
};
const handleOk = () => {
  reviewVisible.value = false;
};
</script>

<style lang="less" scoped>
.review-action {
  display: flex;
  justify-content: flex-end;
  text-align: right;
  padding: 5px;
  background: #fafafb;
  border-bottom: 1px solid #fafafb;
}
.pc {
  // height: 100%;
  border-radius: 5px;
  padding: 6px;
  // margin: 16px;
}
.phone {
  // height: 737px;
  width: 360px;
  margin: auto !important;
  padding: 16px;
  border-radius: 24px;
}
.center {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgb(255, 255, 255);
  margin: 10px;
  box-shadow: 0 0 10px #ccc inset;
  overflow: hidden;
  box-sizing: border-box;
  // box-shadow: 0px 0px 3px 3px #eee;
  .form-draggable {
    overflow: auto;
    height: 100%;
    position: relative;
    .tip {
      color: #7d7d7f;
      position: absolute;
      font-size: 16px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .draggable {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-content: flex-start;
    flex-wrap: wrap;
    overflow: auto;
  }

  &-item {
    position: relative;
    border: #fff solid 1px;
    box-sizing: border-box;

    .form-item {
      display: flex;
      height: 20px;
      position: relative;
      text-align: right;
      justify-content: space-between;
      .fill {
        // flex: 1;
        color: #3296fa;
        z-index: 999;
        font-size: 14px;
      }
    }
    .form-item::before {
      content: '';
      width: 0;
      height: 0;
      border-top: 15px solid skyblue;
      border-right: 15px solid transparent;
    }
    .require::before {
      content: '';
      width: 0;
      height: 0;
      border-top: 15px solid rgb(136, 138, 139) !important;
      border-right: 15px solid transparent;
    }
  }

  .mask {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    cursor: move;
  }

  &-item-choice {
    position: relative;
    border: #3296fa solid 1px;
    box-sizing: border-box;
    .form-item {
      display: flex;
      height: 20px;
      position: relative;
      justify-content: space-between;

      .fill {
        // flex: 1;
        z-index: 999;
      }
    }
    // .form-item::after {
    //   z-index: 999;
    //   content: "\2716";
    //   width: 20px;
    //   height: 20px;
    //   text-align: center;
    //   color: #3296fa;
    // }
    // .require::after {
    //   z-index: 999;
    //   content: "";
    //   width: 20px;
    //   height: 20px;
    //   text-align: center;
    //   color: #3296fa;
    // }
    .form-item::before {
      content: '';
      width: 0;
      height: 0;
      border-top: 15px solid skyblue;
      border-right: 15px solid transparent;
    }
    .require::before {
      content: '';
      width: 0;
      height: 0;
      border-top: 15px solid rgb(136, 138, 139) !important;
      border-right: 15px solid transparent;
    }
  }

  &-item:hover {
    border: #3296fa dashed 1px;

    .form-item {
      // pointer-events: none;
      display: flex;

      .fill {
        // flex: 1;
        z-index: 999;
      }
    }

    // .form-item::after {
    //   z-index: 999;
    //   content: "\2716";
    //   width: 20px;
    //   height: 20px;
    //   text-align: center;
    //   color: #3296fa;
    // }
    // .require::after {
    //   z-index: 999;
    //   content: "";
    //   width: 20px;
    //   height: 20px;
    //   text-align: center;
    //   color: #3296fa;
    // }
  }
}
/* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸 */
::-webkit-scrollbar {
  z-index: 100;
  width: 6px;
  height: 6px;
  background-color: #fff;
}

// /* 定义滚动条轨道 内阴影+圆角 */
::-webkit-scrollbar-track {
  z-index: 100;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgb(144 147 153 / 30%);
}

// /* 定义滑块 内阴影+圆角 */
::-webkit-scrollbar-thumb {
  z-index: 100;
  background-color: rgb(169 169 169 / 50%);
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgb(144 147 153 / 30%);
}
</style>
